<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 50px;
				position: absolute;
				top: 0;
				left: 0;
				transform: 1s;
				/*opacity: 0;*/
			}
		</style>
	</head>
	<body id="bd">
		<script type="text/javascript">
			window.onmousemove=function(e){
//				console.log(e.pageY,e.pageX);
				var img=new Image();
				img.src="xuehua.jpg";
				img.style.top=e.pageY+"px";
				img.style.left=e.pageX+"px";
				//生成完img后，再进行操作
				img.onload=function(){							
					img.style.opacity="0";
					
				}
				bd.appendChild(img);		
				
			}
			
			setInterval(()=>{
				var imgs=document.querySelectorAll("img");
				for(var i=0;i<imgs.length-10;i++){
					imgs[i].remove();
				}
			},1000)

		
			
			
		</script>
	</body>
</html>
